<template>
  <view class="my-section">
    <view class="my-section__header">
      <view class="my-section-title">{{ title }}</view>
      <view class="my-section-more">查看全部</view>
    </view>
    <view class="my-section__body">
      <slot />
    </view>
  </view>
</template>

<script lang="ts" setup>
defineProps<{
  title: string;
  page: string;
}>();
</script>

<style lang="scss">
.my-section {
  margin: 0 40rpx;

  &-title {
    height: 44rpx;
    line-height: 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
  }

  &-more {
    padding-right: 36rpx;
    height: 36rpx;
    line-height: 36rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: #cccccc;
    background-image: url("@/static/icon_arrow_right.png");
    background-repeat: no-repeat;
    background-size: 16rpx 26rpx;
    background-position: 100% center;
  }

  &__header {
    padding: 20rpx 0;
    height: 44rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
